<template>
  <div>
    {{ store.list}}
    <div class="trightBox" ref="chartRef" style="width: 600px; height: 300px;"></div>
    <!-- {{ titleArr }} -->
  </div>
</template>
  
<script setup lang='ts'>
import { reactive, ref, toRefs, onMounted, computed } from 'vue';
import * as echarts from 'echarts';
import { taskAnalyseStore } from '@/store/taskAnalyse';
import { log } from 'console';
import QueryString from 'qs';
const arr = reactive({
  title: [] as any
})
const store = taskAnalyseStore()
// 获取echarts的dom元素
let titleArr = computed(() => {
  return store.list = store.list.map((item) => {
    console.log(item);
    arr.title.push(Object.keys(item)[0])
  })
})
let chartRef = ref();
// 定义收益柱状图数据
let option = reactive({
  title: {
    text: '任务人员分配和时间进度',
    subtext: 'Fake Data',
    textStyle: {
      color: '#fff'
    }
  },
  tooltip: {
    trigger: 'axis'
  },

  legend: {
    data:Object.keys(store.list) // ['Rainfall', 'Evaporation']
  },
  toolbox: {
    show: true,
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      // prettier-ignore
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series:Object.keys(store.list).map((item,index)=>{
    return {
      name:item, //'测试项目管理',
      type: 'bar',
      data:store.list[item].map(item=> Math.ceil(Math.random()*100)),

      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    }
  })
});
onMounted(() => {
  let profitCharts = echarts.init(chartRef.value);
  profitCharts.setOption(option);
});
</script>
<style scoped lang='scss'></style>